<template>
	<div class="login-view-rd">
		<div class="login-wrap">
			<a href="javascript:;" class="gohome" @click="back"><i class="icon"></i></a>
			<div class="login-tip">
				<p class="title" v-show="loginType == 'yzm'">验证码登录</p>
				<p class="title" v-show="loginType == 'reg'">注册</p>
				<p class="title" v-show="loginType == 'password'">密码登录</p>
				<p class="title" v-show="loginType == 'forget'">忘记密码</p>
			</div>
			<label class="login-input-wrap">
				<input placeholder="请输入手机号" v-model="mobile" maxlength="11" type="tel">
				<i class="icon icon-clear"></i>
			</label>
			<label class="login-input-wrap" v-show="loginType == 'password'">
				<input placeholder="请输入密码" type="password" v-model="password">
				<i class="icon icon-clear"></i>
			</label>
			<label class="login-input-wrap yzm-wrap" v-show="loginType != 'password'">
				<input placeholder="请输入验证码" v-model="code" maxlength="4" type="number" class="yzm">
				<button class="btn-getyzm" @click="getLoginCode" :disabled="!codeBtnStatus" :class="{'no-send': !codeBtnStatus}">{{codeBtnText}}</button>
			</label>
			<label class="login-input-wrap" v-show="loginType == 'reg'">
				<input placeholder="请输入邀请码" v-model="invite_code">
				<i class="icon icon-clear"></i>
			</label>
			<label class="login-input-wrap" v-show="loginType == 'forget'">
				<input placeholder="请输入新密码" type="password" v-model="newpassword">
				<i class="icon icon-clear"></i>
			</label>
			<div class="login-type ofH">
				<span class="login-type-btn fl" @click="loginType='password'" v-show="loginType == 'yzm'">密码登录</span>
				<span class="login-type-btn fr" @click="loginType='reg'" v-show="loginType == 'yzm'">注册</span>
				<span class="login-type-btn fr" @click="loginType='yzm'" v-show="loginType == 'reg'">返回</span>
				<span class="login-type-btn fl" @click="loginType='yzm'" v-show="loginType == 'password'">验证码登录</span>
				<span class="login-type-btn fl" @click="loginType='password'" v-show="loginType == 'forget'">返回</span>
				<span class="forget-btn fr" @click="loginType='forget'" v-show="loginType == 'password'">忘记密码</span>
			</div>
			<div class="login-btn-wrap">
				<button class="login-btn" @click="loginSubmit" v-show="loginType == 'yzm'">登录</button>
				<button class="login-btn" @click="loginSubmit" v-show="loginType == 'reg'">注册</button>
				<button class="login-btn" @click="loginSubmit" v-show="loginType == 'password'">登录</button>
				<button class="login-btn" @click="forgetSubmit" v-show="loginType == 'forget'">忘记密码</button>
			</div>
			<p class="login-notice" v-show="loginType == 'reg'">点击注册，即表示您同意 <a href="">《注册协议》</a></p>
		</div>
	</div>
</template>
<style scoped lang="scss">
	.gohome{
		position: fixed;
		top: 54px;
		right: 20px;
		width: 50px;
		height: 50px;
		i{
			@include bg("~__assets/images/icon/back.png",32px,32px);
			float:right;
		}
	}
	.login-view-rd{
		position: fixed;
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
	.login-wrap{
		padding: 0 20px;
	}
	.login-tip{
		padding-bottom: 12px;
    	margin-top: 54px;
		.title{
			font-size: 30px;
			font-weight: 700;
		}
	}
	.login-input-wrap{
		width: 100%;
	    height: 69px;
	    display: block;
	    border-bottom: 1px solid #e5e5e5;
	    box-sizing: border-box;
	    overflow: hidden;
	    position: relative;

	    input{
	    	outline: 0;
		    width: 100%;
		    border: none;
		    font-size: 19px;
		    line-height: 19px;
		    margin-top: 39px;

		    &.yzm{
		    	height: 30px;
			    width: 64.18%;
			    border-radius: 0;
			    padding-bottom: 8px;
			    border-bottom: 1px solid #e5e5e5;
		    }
	    }
	   	.btn-getyzm{
	   		position: absolute;
	   		right: 0;
		    bottom: 0;
		    border: none;
		    font-size: 15px;
		    padding: 0 6px;
		    color: #000;
		    background: none;
		    width: 30.74%;
		    height: 30px;
		    line-height: 30px;
		    border: 1px solid #000;
		    border-radius: 5px;

		    &.no-send{
		    	color: #999!important;
    			border: 1px solid #999!important;
		    }
	   	}
	}
	.yzm-wrap{
		border: none;
	}
	.icon-clear{
		display: none;
		position: absolute;
	    top: 60%;
	    right: 0;
	    @include bg("~__assets/images/icon/close.png",16px,16px);
	}
	.login-type{
		padding-top: 24px;
		font-size: 15px;
		span{color: #58b2e0;}
		.forget-btn{color: #333333;}
	}
	.login-btn-wrap{
		padding: 40px 0 15px;
		.login-btn{
			width: 100%;
			height: 42px;
			line-height: 42px;
			text-align: center;
			font-size: 18px;
			color: #ffffff;
			border-radius: 5px;
			background-color: #0f2dcd;
			background: linear-gradient(left top,rgb(0,255,0),rgb(2,213,96));
	  		background-image: -webkit-linear-gradient( 0deg, rgb(0,255,0) 0%, rgb(2,213,96) 100%);
		}
	}
	.login-notice{
		font-size: 12px;
		text-align: center;
		a{
			color: #58b2e0;
		}
	}
</style>
<script>
	import store from '@/store/index'
	import {isMobile,setCookie,getCookie} from '__assets/js/util'
	import {login,getCode,changePassword} from '__api'

	export default{
		name:'login-view',
		data(){
			return{
				loginType: 'yzm',
				showLogin:true,
				mobile:'',
				invite_code:'',
				code:'',
				codeBtnStatus: false,
				codeBtnText: '获取验证码',
				password:'',
				newpassword:'',
				msgshow:false,
				msgtext:'',
				lodingShow:false,
				routerQuery:''
			}
		},
		watch:{
			mobile(newQuestion){
				if(isMobile(newQuestion)){
					this.codeBtnStatus = true
				} else {
					this.codeBtnStatus = false
				}
			}
		},
		created:function(){
			this.$nextTick( () => {
				this.routerQuery = this.$route.query.redirect
			})
		},
		methods:{
			loginSubmit(){
				if(!this.mobile){
					this.$vux.toast.text('手机号不能为空','top')
					return false;
				}
				if(!isMobile(this.mobile)){
					this.$vux.toast.text('手机号格式错误','top')
					return false;
				}
				if(this.loginType == 'password' && !this.password){
					this.$vux.toast.text('密码不能为空','top')
					return false;
				}
				if(this.loginType == 'yzm' && !this.code){
					this.$vux.toast.text('验证码不能为空','top')
					return false;
				}

				this.$loading();

				login({
					url: this.loginType == 'password' ? '/wap/index.php?ctl=user&act=do_login' : null,
					mobile:this.mobile,
					user_pwd: this.loginType == 'password' ? this.password : null,
					code:this.code,
					invite_code:this.loginType == 'reg' ? this.invite_code : null,
					islogin: this.loginType == 'yzm' ? 1 : 0,
				}).then( res => {
					if(res.status == 1){
						this.$vux.toast.text('登录成功','top');
						this.$loading.end();
						store.dispatch('setUserInfo',res.user)
						store.dispatch('setLoginStatus',true)
						setTimeout(() => {
							if(this.routerQuery){
								this.$router.push({ path:this.routerQuery})
							} else {
								this.$router.push({ path:'/'})
							}
						},500)
					} else {
						this.$loading.end();
						this.$vux.toast.text(res.msg?res.msg:'网络超时','middle');
					}
					
					// if(res.errno == 0){
						
						
					// } else {
						
					// }
					// this.msgtext = res.msg
				})
			},
			getLoginCode(){
				if(!this.mobile){
					this.$vux.toast.text('手机号不能为空','top')
					return false;
				}
				if(!isMobile(this.mobile)){
					this.$vux.toast.text('手机号格式错误','top')
					return false;
				}
				let timerCount = 60;
				this.codeBtnStatus = false;
				this.codeBtnText = 60 + 's后重发'
				let timer = setInterval(()=>{
					timerCount --;
					this.codeBtnText = timerCount + 's后重发'
					if(timerCount <= 0){
						clearInterval(timer);
						this.codeBtnText = '获取验证码'
						this.codeBtnStatus = true;
					}
				},1000)
				getCode({mobile: this.mobile}).then( res => {
					if(res.status == 0){
						this.$vux.toast.text(res.msg?res.msg:'网络超时','middle');
					}
				})
			},
			forgetSubmit(){
				if(!this.mobile){
					this.$vux.toast.text('手机号不能为空','top')
					return false;
				}
				if(!isMobile(this.mobile)){
					this.$vux.toast.text('手机号格式错误','top')
					return false;
				}
				if(!this.code){
					this.$vux.toast.text('验证码不能为空','top')
					return false;
				}
				if(!this.newpassword){
					this.$vux.toast.text('密码不能为空','top')
					return false;
				}
				changePassword({
					mobile: this.mobile,
					user_pwd: this.newpassword,
					confirm_user_pwd: this.newpassword,
					code: this.code
				}).then(res=>{
					if(res.status == 0){
						this.$vux.toast.text(res.msg?res.msg:'网络超时','middle');
					} else if(res.status == 1) {
						this.$vux.toast.text('修改成功','middle');
						setTimeout(()=>{
							this.loginType = 'password'
						},1000)
					}
				})
			},
			verifiPassword(val){
				return /^[\w]{6,12}$/.test(val)
			},
			back(){
                if (window.history.length <= 1) {
                    this.$router.push({path:'/index'})
                    return false
                } else {
                    this.$router.go(-1);
                    return;
                }
                //上面都没执行就说明卡在当前页不是最后一条， histroy记录数量大于1，又没有回退记录，只能返回首页，
                //如果上面都执行了 页面都跳走了，这个也就不用管了   
                setTimeout(() => {
                    this.$router.push({path:'/'})      
                },500)
            }
		}
	}
</script>